<template>
    <div v-if="modelValue && preview">
        <el-image v-if="typeof modelValue == 'string'" :src="modelValue" fit='cover' class="chooseTop"></el-image>
        <div v-else class="chooseImageImgBody">
            <div class="chooseImageImg" v-for="(url, index) in  modelValue" :key="index">
                <el-icon class="chooseImageIcon" @click="removeImage(url)">
                    <CircleClose :limit="9" />
                </el-icon>
                <el-image :src="url" fit='cover' class="chooseTop"></el-image>
            </div>
        </div>
    </div>
    <div v-if="preview" class="chooseImage" @click="open">
        <el-icon :size="25">
            <Plus />
        </el-icon>
    </div>
    <el-dialog title="选择图片" v-model="dialogVisible" top="5vh" width="80%">
        <el-container class="image" style="height: 70vh">
            <el-header class="imageHeader">
                <el-button type="primary" size="small" @click="handleOpenCreate">新增图片分类</el-button>
                <el-button type="warning" size="small" @click="handleOpenUpload">上传图片</el-button>
            </el-header>
            <el-container>
                <ImageAside ref="imageAsideRef" @change="handleAsideChange"></ImageAside>
                <ImageMain :limit="limit" openChoose ref="ImageMainRef" @choose="handleChoose"></ImageMain>
            </el-container>
        </el-container>
        <template #footer>
            <span>
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import ImageAside from '@/pages/image/components/ImageAside.vue'
import ImageMain from '@/pages/image/components/ImageMain.vue'
import { elNotification } from '@/hooks/elNotification.js'

const dialogVisible = ref(false)

// 打开dialog弹窗
const callbackFuntion = ref(null)
const open = (callback = null) => {
    callbackFuntion.value = callback
    dialogVisible.value = true
}

// 关闭dialog弹窗
const close = () => {
    dialogVisible.value = false
}

const windowHeight = window.innerHeight || document.body.clientHeight
const h = windowHeight - 64 - 44 - 40

const imageAsideRef = ref(null)
const handleOpenCreate = () => imageAsideRef.value.handleCreate()

const ImageMainRef = ref(null)

// 列表对应图库切换
const handleAsideChange = (id) => {
    ImageMainRef.value.loadData(id)
}

// 打开上传图片
const handleOpenUpload = () => ImageMainRef.value.openUploadFile()

// 与父组件传递数据
const props = defineProps({
    modelValue: [String, Array],
    limit: {
        type: Number,
        default: 1
    },
    preview: {
        type: Boolean,
        default: true
    }
})
const emit = defineEmits(["update:modelValue"])

// 获取图片url
let urls = []
const handleChoose = (e) => {
    urls = e.map(o => o.url)
}

// 确认选择图片
const submit = () => {
    let value = []
    if (props.limit == 1) {
        value = urls[0]
    } else {
        value = [...new Set(props.preview ? [...props.modelValue, ...urls] : [...urls])]
        if (value.length > props.limit) {
            let limit = props.preview ? (props.limit - props.modelValue.length) : props.limit
            return elNotification("最多还能选择" + limit + "张")
        }
    }
    if (value && props.preview) {
        emit("update:modelValue", value)
    }
    if (!props.preview && typeof callbackFuntion.value === 'function') {
        callbackFuntion.value(value)
    }
    close()
}

// 移除图片
const removeImage = (url) => {
    emit("update:modelValue", props.modelValue.filter(u => u != url))
}

defineExpose({
    open
})
</script>
<style scoped lang="less">
.chooseImageImgBody {
    display: flex;
    flex-wrap: wrap;

    .chooseImageImg {
        position: relative;
        margin: 5px 5px;
        width: 100px;
        height: 100px;

        .chooseImageIcon {
            position: absolute;
            right: 5px;
            top: 5px;
            cursor: pointer;
            z-index: 10;
        }
    }

}

.chooseTop {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.chooseImage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &:hover {
        background-color: #f6f6f6;
    }
}
</style>